<template>

    <el-dialog :title="detailTitle" width="70%" @close="handleClose" style="font-size: larger;height: auto;">

        <div class="container">
            <!-- 左侧 -->
            <div class="row">
                <span class="label">所有者</span>
                <span class="content bold">{{ form.crmActivity.owner }}</span>
            </div>
            <!-- 右侧 -->
            <div class="row2">
                <span class="label">名称</span>
                <span class="content bold">{{ form.crmActivity.name }}</span>
            </div>
        </div>

        <div class="container">
            <div class="row">
                <span class="label">开始日期</span>
                <span class="content bold">{{ form.crmActivity.startDate }} </span>
            </div>
            <!-- 右侧 -->
            <div class="row2">
                <span class="label">结束日期</span>
                <span class="content bold">{{ form.crmActivity.endDate }}</span>
            </div>
        </div>


        <div class="row pading">
            <span class="label">成本</span>
            <span class="content bold">{{ form.crmActivity.cost }} </span>
        </div>
        <div class="row pading" style=" width: 70%;">
            <span class="label">创建者</span>
            <span class="content bold">{{ form.crmActivity.createBy }}
                <span class="timeclass">
                    {{ form.crmActivity.createTime }}
                </span>

            </span>
        </div>
        <!-- 右侧 -->
        <div class="row pading" style=" width: 70%">
            <span class="label">修改者</span>
            <span class="content bold">{{ form.crmActivity.editBy }}
                <span class="timeclass">
                    {{ form.crmActivity.editTime }}
                </span>

            </span>
        </div>

        <div class="row pading" style=" width: 100%">
            <span class="label">描述</span>
            <span class="content bold">{{ form.crmActivity.description }}</span>
        </div>

        <CommentItem :remarks="form.remarkList" @deleteComment="deleteComment" @editComment="editComment"
            @onSubmit="onSubmit" />

    </el-dialog>
</template>

<script setup>
import { defineEmits, defineProps, ref, watch } from "vue"
import requestUtil, { getImageUrl } from "@/util/request";
import { ElMessage, ElMessageBox } from 'element-plus'
import CommentItem from '@/components/CommentItem'
//表单数据
const form = ref({
    crmActivity: {
        "id": "01e810416e4f436bad92cd8223ca4a86",
        "owner": "fefee35b3ef14bd7ae2787a24d9796f3",
        "name": "保时捷",
        "startDate": "2024-12-24",
        "endDate": "2025-01-05",
        "cost": "2000",
        "description": "圣诞节",
        "createTime": "2024-12-24 17:07:57",
        "createBy": "admin",
        "editTime": null,
        "editBy": null
    },
    remarkList: [],
})

const detailTitle = ref("")

//父组件传递的数据
const props = defineProps(
    {
        id: {
            type: String,
            default: "",
            required: true
        },
        dialogVisible: {
            type: Boolean,
            default: false,
            required: true
        }
    }
)
//删除评论
const deleteComment = async (comment, index) => {

    const res = await requestUtil.getRestFulApi("crmActivityRemark/deleteActivityRemarkById/{id}", { id: comment.id })
    if (res.data.code == 1) {
        ElMessage.success("执行成功！")
        initDetailData(comment.activityId)
    } else {
        ElMessage.error(res.data.message);
    }
}
//修改评论
const editComment = async (comment) => {
    const res = await requestUtil.post("crmActivityRemark/updateCreateActivityRemark", comment)
    console.log("点击删除按钮响应数据", res);
    if (res.data.code == 1) {
        ElMessage.success("执行成功！")
        initDetailData(comment.activityId)
    } else {
        ElMessage.error(res.data.message);
    }

}
//添加评论
const onSubmit = async (desc) => {

    const res = await requestUtil.post("crmActivityRemark/saveCreateActivityRemark", { activityId: props.id , noteContent: desc })
    const data = res.data
    if (data.code == 1) {
        ElMessage.success("执行成功！")
        initDetailData(props.id)
    } else {
        ElMessage.error(data.message);
    }
}

//初始化数据
const initDetailData = async (activeId) => {
    const res = await requestUtil.getRestFulApi("crmActivity/detailActivity/{id}", { id: activeId });
    const data = res.data.data;
    form.value = data;
    detailTitle.value = `市场活动-${data.crmActivity.name}`
}
const emits = defineEmits(['update:modelValue'])
//关闭from表单
const handleClose = () => {
    emits('update:modelValue', false)
}

watch(
    () => props.dialogVisible,
    () => {
        let id = props.id;
        if (id != "" && props.dialogVisible) {
            initDetailData(id);
        }
    }
)

</script>

<style scoped>
.container {
    display: flex;
    /* 使用 Flexbox 布局 */
    justify-content: space-between;
    /* 左右两部分对齐 */
    align-items: center;
    /* 垂直居中 */
    padding: 10px 0;
    /* 上下留白 */
}

.row {
    display: flex;
    /* 每一行使用 Flexbox 布局 */
    align-items: center;
    /* 确保垂直居中 */
    gap: 10px;
    /* 在子元素之间添加间距 */
    border-bottom: 1px solid gray;
    /* 添加底部的线条 */
    padding: 5px 0;
    /* 底部线条与文字之间的间距 */
    width: 55%;

}

.row2 {
    display: flex;
    /* 每一行使用 Flexbox 布局 */
    align-items: center;
    /* 确保垂直居中 */
    gap: 10px;
    /* 在子元素之间添加间距 */
    border-bottom: 1px solid gray;
    /* 添加底部的线条 */
    padding: 5px 0;
    /* 底部线条与文字之间的间距 */
    width: 40%;
}

.label {
    color: gray;
    /* 左边文字颜色 */
    margin-right: 10px;
    /* 名称与右侧内容的间距 */
}

.content {
    color: black;
    /* 内容文字颜色 */
    font-weight: bold;
    /* 加粗 */
    text-align: center;
    /* 保证文字在 div 中间居中 */
    flex-grow: 1;
    /* 让这个元素占据剩余空间 */

}

.bold {
    font-weight: bold;
    /* 加粗字体 */
}

.pading {
    padding: 10px 0
}

.timeclass {
    color: grey;
    font-weight: normal;
}

.input {
    padding: 10px 0;
    width: 98%;
    margin-left: 10px;
}

.button {
    padding: 5px 0;
    margin-left: 82%;

}

</style>